<template>
  <div class="header">
    <span class="left"></span>
    <span class="center">{{ title }}</span>
    <span class="right" @click="send">右</span>
  </div>
</template>
<script>
export default {
  props: {
    title:{
      type: String,
      required: true
    }
  },
  data:()=>{
    return {
      count: 10
    }
  },
  methods: {
    send(){
      this.$emit('zs',this.count)
    }
  },
};
</script>
<style>
.header {
  position: relative;
  height: 5rem;
  background-color: #f0f0f0;
}
.left{
  float: left;
}
.right{
  float: right;
}
.right,.left{
  font-size: 1.5em;
  line-height: 5rem;
}
.center{
  font-size: 2em;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
</style>